<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<script src="../jss/global.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--头部搜索栏-->
		<div class="layui-form-item" style="margin-top: 20px;" onsubmit="return false;">
			<form class="layui-form">
				<label class="layui-form-label">咨询师姓名:</label>
				<div class="layui-input-inline" style="width:120px;">
					<input type="text" id="sname" name="userName" autocomplete="off" class="layui-input">
				</div>

				<label class="layui-form-mid">是否启用分配:</label>
				<div class="layui-input-inline" style="width:120px;">
					<select id="sopen" name="isOpen">
						<option value="">请选择</option>
						<option value="1">启用分配</option>
						<option value="0">停用分配</option>
					</select>
				</div>

			</form>
			<button class="layui-btn" id="search" data-type="reload">搜索</button>
		</div>

		<!--顶部工具栏-->
		<script type="text/html" id="topToolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="setAuto">设置分配方式</button>
			</div>
		</script>
		<!--数据表格-->
		<table class="layui-hide" id="demo" lay-filter="test"></table>

		<!--行内工具栏-->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-sm" lay-event="edit">修改权重</a>
		</script>

		<!-- 修改页面开始 -->
		<form class="layui-form" onsubmit="return false;" id="upForm" style="display: none;">
			<div class="layui-form-item" style="display: none;">
				<label class="layui-form-label">用户Id：</label> 
				<input type="text" name="conId" id="conId" style="width: 130px" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重：</label> 
				<input type="text" name="conWeight" id="conWeight" style="width: 130px" lay-verify="required" placeholder="请输入权重" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="update">修改</button>
				</div>
			</div>

		</form>
		<!-- 修改页面结束 -->
		
		<!-- 添加页面开始 -->
		<form class="layui-form" onsubmit="return false;" id="setForm" style="display: none;">

			<div class="layui-form-item">
				<label class="layui-form-label">自动分配：</label> 
				<input type="checkbox" name="switch" lay-skin="switch" data-id="{{d.conId}}" lay-text="已开启|已关闭" value="1" lay-filter="switch" checked="checked">
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="setTool">确定</button>					
				</div>
			</div>

		</form>
		<!-- 添加页面结束 -->
		
		

		<!-- 锁定状态分析逻辑 -->
		<script type="text/html" id="state">

			{{#      if(d.isOpen == 1){       }}
			<input type="checkbox" name="switch" lay-skin="switch" data-id="{{d.conId}}" lay-text="启用分配|关闭分配" value="1" lay-filter="switch" checked="checked"> {{#       } else {       }}
			<input type="checkbox" name="switch" lay-skin="switch" data-id="{{d.conId}}" lay-text="启用分配|关闭分配" value="0" lay-filter="switch"> {{#        }              }}
		</script>

		<script>
			var addIndex;
			layui.use(['laydate', 'layer', 'table', 'form', 'laytpl'], function() {
				var laydate = layui.laydate,
					layer = layui.layer,
					table = layui.table,
					form = layui.form,
					$ = layui.$;

				//执行一个 table 实例
				table.render({
					elem: '#demo',
					toolbar: '#topToolbar',
					url: globalData.server + "consultant/select",
					where: {
						token: globalData.getToken()
					},
					title: '用户表',
					page: true,
					cols: [
						[{
							field: 'conId',
							title: '咨询师编号',
							width: 100
						}, {
							field: 'userId',
							title: '用户编号',
							width: 100,
							hide: true
						}, {
							field: 'userName',
							title: '咨询师姓名',
							width: 100
						}, {
							field: 'isOpen',
							title: '是否分配',
							width: 100,
							templet: "#state"
						}, {
							field: 'conWeight',
							title: '权重',
							width: 100
						}, {
							title: '操作',
							width: 260,
							fixed: 'right',
							toolbar: '#barDemo'
						}]
					],
					id: "testTable",
				});
				//数据重载

				//点击搜索按钮，调用方法
				$('#search').click(function() {
					table.reload('testTable', {
						where: {
							//模糊查询的条件
							'userName': $('#sname').val(),
							'isOpen': $('#sopen').val()
						}
					});

				});

				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据    data.列名
					var layEvent = obj.event; //获得 lay-event 对应的值
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if(layEvent === 'edit') { //编辑
						//do something
						//弹出一个修改的页面
						//数据回显
						$('#conId').val(data.conId);
						$('#conWeight').val(data.conWeight);
						layer.open({
							type: 1,
							content: $('#upForm'),
							area: ['600px', '500px'],
							title: ["正在修改" + data.userName + "的信息"]
						});
						//同步更新缓存对应的值
						obj.update({
							username: '123',
							title: '正在更新'
						});
					}

				});

				//监听表单提交--修改
				form.on('submit(update)', function(data) {
					var data = $("#upForm").serialize() + "&token=" + globalData.getToken();
					//将表单以序列化提交
					//提交  ajax
					$.post(
						//地址
						globalData.server + 'consultant/update', //修改用户的方法
						data,
						function(res) {
							if(res.code == 0) {
								layer.msg('修改成功', {
									icon: 1
								}, function() {
									layer.close(addIndex); //关闭修改窗口
									window.location.reload(); //刷新页面
								});
							} else {
								layer.msg('修改失败，请刷新重试', {
									icon: 4
								}, function() {
									layer.close(addIndex); //关闭修改窗口
									window.location.reload(); //刷新页面
								});
							}
						}, 'json');
				});

				//监听开关事件
				form.on('switch(switch)', function(data) {
					var id = $(this).attr('data-id');
					var ck = data.elem.checked;

					layer.confirm(ck ? '确定启用？' : '确定禁用？', {
						btn1: function(index) { //点击确定							
							//将表单以序列化提交
							//提交  ajax
							$.post(
								//地址
								globalData.server + 'consultant/isOpen', //锁定用户的方法
								{ //将数据以序列化提交
									token: globalData.getToken(),
									'isOpen': data.value,
									'conId': id

								},
								function(res) {
									if(res.code == 0) {
										layer.msg(res.msg, {
											icon: 1
										}, function() {
											layer.close(index);
										});
									} else if(res.code == 1) {
										layer.msg(res.msg, {
											icon: 1
										}, function() {
											layer.close(index);
										});
									} else {
										layer.msg(res.msg, {
											icon: 4
										}, function() {
											data.elem.checked = !ck;
											layer.close(index);
											form.render('checkbox');
										});
									}
								}, 'json');

						},
						btn2: function() { //点击取消
							data.elem.checked = !ck;
							form.render('checkbox');

						},
						cancel: function() { //点击X号
							data.elem.checked = !ck;
							form.render('checkbox');
						},
					});

				});
				
				
				//点击添加按钮弹出页面
				table.on('toolbar(test)', function(obj) {
					switch(obj.event) {
						case 'setAuto':
							{
								addIndex = layer.open({
									type: 1,
									content: $('#setForm'),
									area: ['600px', '500px'],
									title: "您正在设置分配方式"
								});
							}
							break;
					};
				});

				//监听表单提交--自动分配设置
				form.on('submit(setTool)', function(data) {
					//将表单以序列化提交
					var data = $("#setForm").serialize() + "&token=" + globalData.getToken();
					//提交  ajax
					$.post(
						//地址
						globalData.server + 'tool/isAuto',
						data,
						//整个表单的数据以序列化的形式提交
						function(res) {
							if(res.code == 0) {
								layer.msg(res.msg, {
									icon: 1
								}, function() {
									layer.close(addIndex); //关闭添加窗口
									window.location.reload(); //刷新页面
								});
							} else if(res.code == 1) {
								layer.msg(res.msg, {
									icon: 1
								}, function() {
									layer.close(addIndex); //关闭添加窗口
									window.location.reload(); //刷新页面
								});
							} else {
								layer.msg(res.msg, {
									icon: 4
								}, function() {
									layer.close(addIndex); //关闭添加窗口
									window.location.reload(); //刷新页面
								});
							}

						}, 'json');
				});

			});
		</script>

	</body>

</html>